<template>
	<view class="u-dropdown">
		<view class="u-dropdown__menu" :style="{
			height: $u.addUnit(height)
		}" :class="{
			'u-border-bottom': borderBottom
		}">
			<view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
				<view class="u-flex">
					<text class="u-dropdown__menu__item__text" :style="{
						color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor,
						fontSize: $u.addUnit(titleSize)
					}">{{item.title}}</text>
					<view class="u-dropdown__menu__item__arrow" :class="{
						'u-dropdown__menu__item__arrow--rotate': index === current
					}">
						<u-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="$u.addUnit(menuIconSize)" :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="u-dropdown__content" v-show="active"  :style="[contentStyle, {
			transition: `opacity ${duration / 1000}s linear`,
			top: $u.addUnit(height),
			height: contentHeight + 'px'
		}]"
		 @tap="maskClick" @touchmove.stop.prevent>
			<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
				<slot></slot>
			</view>
			<view class="u-dropdown__content__mask"></view>
		</view>
	</view>
</template>

<script>
	
	export default {
		name: 'u-dropdown',
		props: {
			
			activeColor: {
				type: String,
				default: '#2979ff'
			},
			
			inactiveColor: {
				type: String,
				default: '#606266'
			},
			
			closeOnClickMask: {
				type: Boolean,
				default: true
			},
			
			closeOnClickSelf: {
				type: Boolean,
				default: true
			},
			
			duration: {
				type: [Number, String],
				default: 300
			},
			
			height: {
				type: [Number, String],
				default: 80
			},
			
			borderBottom: {
				type: Boolean,
				default: false
			},
			
			titleSize: {
				type: [Number, String],
				default: 28
			},
			
			borderRadius: {
				type: [Number, String],
				default: 0
			},
			
			menuIcon: {
				type: String,
				default: 'arrow-down'
			},
			
			menuIconSize: {
				type: [Number, String],
				default: 26
			}
		},
		data() {
			return {
				showDropdown: true, 
				menuList: [], 
				active: false, 
				
				
				current: 99999,
				
				contentStyle: {
					zIndex: -1,
					opacity: 0
				},
				
				highlightIndex: 99999,
				contentHeight: 0
			}
		},
		computed: {
			
			popupStyle() {
				let style = {};
				
				style.transform = `translateY(${this.active ? 0 : '-100%'})`
				style['transition-duration'] = this.duration / 1000 + 's';
				style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
				return style;
			}
		},
		created() {
			
			this.children = [];
		},
		mounted() {
			this.getContentHeight();
		},
		methods: {
			init() {
				
				
				this.menuList = [];
				this.children.map(child => {
					child.init();
				})
			},
			
			menuClick(index) {
				
				if (this.menuList[index].disabled) return;
				
				if (index === this.current && this.closeOnClickSelf) {
					this.close();
					
					setTimeout(() => {
						this.children[index].active = false;
					}, this.duration)
					return;
				}
				this.open(index);
			},
			
			open(index) {
				
				
				
				this.contentStyle = {
					zIndex: 11,
					opacity:1
				}
				
				this.active = true;
				this.current = index;
				
				
				this.children.map((val, idx) => {
					val.active = index == idx ? true : false;
				})
				this.$emit('open', this.current);
			},
			
			close() {
				this.$emit('close', this.current);
				
				
				this.current = 99999;
				
				this.contentStyle = {
					zIndex: -1,
					opacity: 0
				}
				setTimeout(()=>{
					this.active = false;
				},this.duration)
			},
			
			maskClick() {
				
				if (!this.closeOnClickMask) return;
				this.close();
			},
			
			highlight(index = undefined) {
				this.highlightIndex = index !== undefined ? index : 99999;
			},
			
			getContentHeight() {
				
				
				
				let windowHeight = this.$u.sys().windowHeight;
				this.$uGetRect('.u-dropdown__menu').then(res => {
					
					
					
					
					this.contentHeight = windowHeight - res.bottom;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../../libs/css/style.components.scss";

	.u-dropdown {
		flex: 1;
		width: 100%;
		position: relative;

		&__menu {
			@include vue-flex;
			position: relative;
			z-index: 11;
			height: 80rpx;

			&__item {
				flex: 1;
				@include vue-flex;
				justify-content: center;
				align-items: center;

				&__text {
					font-size: 28rpx;
					color: $u-content-color;
				}

				&__arrow {
					margin-left: 6rpx;
					transition: transform .3s;
					align-items: center;
					@include vue-flex;

					&--rotate {
						transform: rotate(180deg);
					}
				}
			}
		}

		&__content {
			position: absolute;
			z-index: 8;
			width: 100%;
			left: 0px;
			bottom: 0;
			overflow: hidden;
			

			&__mask {
				position: absolute;
				z-index: 9;
				background: rgba(0, 0, 0, .3);
				width: 100%;
				left: 0;
				top: 0;
				bottom: 0;
			}

			&__popup {
				position: relative;
				z-index: 10;
				transition: all 0.3s;
				transform: translate3D(0, -100%, 0);
				overflow: hidden;
			}
		}

	}
</style>
